<template>
  <div class="member">
    <div class="top">
      <conHeader></conHeader>
    </div>
    <div class="content">
      <!--总计-->
      <div class="topTotal cleanFloat">
        <!--总获得奖励-->
        <div class="ttc_con">
          <div class="ttcc_text">总获得奖励</div>
          <div class="ttcc_money">
            <span class="icon">￥</span>
            <span class="money">{{totalList.total_money}}</span>
          </div>
        </div>
        <!--共推广会员-->
        <div class="ttc_con">
          <div class="ttcc_text">共推广会员</div>
          <div class="ttcc_money">
            <span class="money">{{totalList.total_num}}</span>
          </div>
        </div>
        <!--今日推广-->
        <div class="ttc_con">
          <div class="ttcc_text">今日推广</div>
          <div class="ttcc_money">
            <span class="money">{{totalList.today_num}}</span>
          </div>
        </div>
        <!--今日获得奖励-->
        <div class="ttc_con">
          <div class="ttcc_text">今日获得奖励</div>
          <div class="ttcc_money">
            <span class="icon">￥</span>
            <span class="money">{{totalList.today_money}}</span>
          </div>
        </div>
      </div>
      <!--筛选-->
      <div class="mem_screen cleanFloat">
        <!--时间-->
        <div class="msc_con cleanFloat">
          <div class="title">下单时间</div>
          <div class="asse">
            <el-date-picker
              v-model="start_time"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
        <div class="msc_con">-</div>
        <div class="msc_con cleanFloat">
          <div class="asse">
            <el-date-picker
              v-model="end_time"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
        <!--确认按钮-->
        <div class="msc_con cleanFloat" style="line-height: 40px;margin-left: 20px">
          <div class="asse"><el-button type="success" size="mini" @click="getCommissionList">确认</el-button></div>
        </div>
      </div>
      <!--表单内容-->
      <div class="tableContent">
        <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="姓名"
            width="150"
            align="center">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="150"
            align="center">
          </el-table-column>
          <el-table-column
            prop="card_code"
            label="会员卡号"
            width="150"
            align="center">
          </el-table-column>
          <el-table-column
            label="是否已消费"
            width="150"
            align="center">
            <template slot-scope="scope">
              <span v-html="scope.row.is_consumed == 0?'未消费':'已消费'"></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="money"
            label="获得奖励金额"
            width="150"
            align="center">
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="注册时间"
            width="250"
            align="center">
          </el-table-column>
          <el-table-column
            label=""
            align="center">
            <template slot-scope="scope">
              <span class="binding" v-if="scope.row.referrer_id == 0" @click="bindMem(scope.row)">绑定会员</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalNum"
          @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import conHeader from '../assembly/conHeader'
    export default {
      name: "reward-index",
      components: {
        conHeader,
      },
      data() {
        return {
          start_time:'', //开始时间
          end_time:'', //结束时间
          totalList:[], //顶部统计数据
          page:1,
          totalNum:0,
          tableData: []
        }
      },
      created() {
        let self = this
        self.$http.post(self.conURL + 'hotel/work/getmycommissioncount').then(res => {
          if (res.data.code == 0){
            self.totalList = res.data.data
          }else {
            self.createMess(res.data.msg)
          }
        })
        self.getCommissionList()
      },
      mounted() {
      },
      methods: {
        //查询列表
        getCommissionList(){
          let self = this
          self.$http.post(self.conURL + 'hotel/work/getmycommissionlist',{
            stime:self.start_time,
            etime:self.end_time
          }).then(res => {
            if (res.data.code == 0){
              self.totalNum = res.data.data.total
              self.tableData = res.data.data.data
            }else {
              self.createMess(res.data.msg)
            }
          })
        },
        //分页：页面选择事件
        currentChange(val) {
          let self = this
          self.page = val
          self.getCommissionList()
        },
        //绑定会员
        bindMem(row){
          let self = this
          self.$http.post(self.conURL + 'hotel/hotel/bindreferrer',{member_id:row.card_code}).then(res => {
            if (res.data.code == 0){
              self.getCommissionList()
            }else {
              self.createMess(res.data.msg)
            }
          })
        },
        /*------------------公用方法获取数据------------------------------------*/
        /*接口请求失败，提示信息*/
        createMess(msg){
          this.$notify.error({
            title: '错误',
            message: msg
          });
        },
      }
    }
</script>

<style lang="less" scoped>
  .member{
    width: 100%;
    height: 100%;
    background: #fff;
    .top{
      width: 100%;
      height: 48px;
      background: #fff;
      -webkit-box-shadow: 0px 3px 3px #dcdfe6;
      box-shadow: 0px 3px 3px #dcdfe6;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
    }
    .content{
      padding-top: 48px;
      .topTotal{
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #ebeef5;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        .ttc_con{
          width: 20%;
          height: 200px;
          border: 1px solid #ebeef5;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .ttcc_text{
            font-size: 40px;
            text-align: center;
          }
          .ttcc_money{
            display: flex;
            flex-direction: row;
            justify-content: center;
            .icon{
              font-size: 30px;
              line-height: 66px;
            }
            .money{
              font-size: 40px;
              line-height: 60px;
            }
          }
        }
      }
      .mem_screen{
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #ebeef5;
        .msc_con{
          float: left;
          margin-right: 10px;
          line-height: 40px;
          .title,.asse{
            float: left;
          }
          .title{
            font-size: 14px;
            line-height: 40px;
            margin-right: 10px;
          }
        }
      }
      .tableContent{
        width: 100%;
        margin-top: 10px;
        padding: 0 15px;
        box-sizing: border-box;
        .binding{
          cursor: pointer;
        }
        .binding:hover{
          color: #409EFF;
        }
      }
      .pagination{
        margin-top: 10px;
        float: right;
      }
    }
  }
</style>
